$(document).ready(function () {
    let imageData = [
        {
            url: 'https://www.tibettour.org/assets/images/grouptour/15-day-kailash-theme-480.jpg',
            txtHead: 'xxxx',
            txtContent: 'xxxx',
            num: '99',
        },
        {
            url: 'https://www.tibettour.org/assets/images/grouptour/8-day-ebc-480-theme.jpg',
            txtHead: 'xxxx',
            txtContent: 'xxxx',
            num: '99',
        },
        {
            url: 'https://www.tibettour.org/assets/images/grouptour/8-day-kathmandu-lhasa-4801.jpg',
            txtHead: 'xxxx',
            txtContent: 'xxxx',
            num: '99',
        },
    ]
    function renderImageData(dataArray) {
        // 使用jQuery的each函数来遍历传入的数据数组
        $.each(dataArray, function (index, item) {
            let sigleBox = $('<div>', {
                class: 'sigle-box'
            });
            let boxImg = $('<div>', {
                class: 'box_img'
            });
            let imgElement = $('<img>', {
                src: item.url,
                alt: ''
            });
            boxImg.append(imgElement);
            // 创建box_txt元素和它的子元素
            let boxTxt = $('<div>', {
                class: 'box_txt'
            });
            let txtHead = $('<div>', {
                class: 'txt_head',
                text: item.txtHead // 设置头部内容
            });
            let txtContent = $('<div>', {
                class: 'txt_content',
                text: item.txtContent // 设置文本内容
            });
            boxTxt.append(txtHead).append(txtContent);
            let boxBootm = $('<div>', {
                class: 'box_bootm'
            });
            let bootmLeft = $('<div>', {
                class: 'bootm_left',
                text: 'Price from: ' + item.num
            });
            let bootmRight = $('<div>', {
                class: 'bootm_right',
                text: 'View Details'
            });
            boxBootm.append(bootmLeft).append(bootmRight);
            sigleBox.append(boxImg).append(boxTxt).append(boxBootm);
            $('.all_box').append(sigleBox);
        });
    }
    // 调用封装的函数进行渲染
    renderImageData(imageData);
    // 绑定点击事件
    $(".btn").click(function () {
        // 在按钮点击时再次调用渲染函数，传入新的数据数组
        renderImageData(imageData);
    });
    $(".txt_head").mouseenter(function () {
        $(this).addClass("activetxt");
    }).mouseleave(function () {
        $(this).removeClass("activetxt");
    });

    $(".bootm_right").mouseenter(function () {
        $(this).addClass("activebtn");
    }).mouseleave(function () {
        $(this).removeClass("activebtn");
    });
    $("#myForm").submit(function (event) {
        event.preventDefault();
        let inputValue = $("#inputField").val();
        // 验证输入框的值是否为空
        if (inputValue.trim() === "") {
            alert("输入框不能为空！");
            return false;
        } else {
            // 如果不为空，则允许表单提交
            alert("表单提交成功！");
        }
    });
});